<!--
 * @Author: 周鹏飞
 * @Date: 2021-06-02 10:57:55
 * @LastEditors: 周鹏飞
 * @LastEditTime: 2021-07-09 16:15:56
 * @Description: file content
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>智慧高速综合管控平台</title>
  <link rel="stylesheet" href="./css/animate.min.css" />
  <!-- <link rel="stylesheet" href="./css/animate.css" /> -->
  <!-- 引入element样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <!-- 引入vue -->
  <script src="./js/vue.js"></script>
  <!-- 引入element组件库 -->
  <script src="./js/element.js"></script>



  <!--引入主页样式文件 -->
  <link rel="stylesheet" href="css/highSpeed.css">
  <!-- 引入地图 -->
  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=IHkpqWPrVexItnG1WweaPh9utTIiRMsH"></script>
  <!-- 引入echarts -->
  <script src="./js/echarts/echarts.min.js"></script>
  <!-- 左边第一张图 -->
  <script src="js/echarts/leftOne.js">
  </script>
  <!-- 左边第二张图 -->
  <script src="js/echarts/leftTwo.js">
  </script>
  <!--  左边第三张图-->
  <script src="js/info/leftThree.js"></script>
  <!-- 右边第二张图 -->
  <script src="js/echarts/rightwo.js"></script>
  <!-- 引入layui -->
  <script src="js/laydate/laydate.js"></script>
  <!-- 引入jquery -->
  <!-- <script src="js/jquery-1.7.2.js"></script> -->

  <!-- ip -->
  <script src="js/config.js"></script>
  <!-- 重点监控 -->
  <script src="js/info/monitor.js"></script>
  <!-- 事件 -->
  <script src="js/map/getEveList.js"></script>
  <!-- 滚动插件 -->
  <link rel="stylesheet" href="css/jquery.newsticker.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.newsticker.js"></script>
  <!-- <script src="js/jquery-1.8.3.min.js"></script>
  <link rel="stylesheet" href="css/liMarquee.css">
  <script src="js/jquery.liMarquee.js"></script> -->









  <style type="text/css">
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      height: 100%
    }
  </style>
</head>

<body>

  <div id="container"></div>
  <div class="main" id="app">
    <div class="bjimg">
      <img src="images/line.png" alt="">
    </div>
    <div class="speed">
      <img src="images/title1.png" alt="">
    </div>
    <div class="left animate__animated" v-bind:class="{tableleft: leftShow}">
      <div class="main-ImgLeft">
        <img class="bgd_left" src="images/background_left.png" alt="">
      </div>
      <div class="surface-left">
        <div class="leftIconX" v-show='leftShow==false' @click=getHideL()>
          <img src="./images/jtRight.png" alt="">
        </div>
        <div class="leftIconY" v-show='leftShow==true' @click=getHideL()>
          <img src="./images/jtLeft.png" alt="">
        </div>
        <div class="left-one">
          <img src="images/box_left_one.png" alt="">
          <!-- <div class="select">
            <template>
              <el-select v-model="carType" placeholder="请选择车辆类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div> -->

          <div id="Eleft_one" style="width: 400px;height:300px;">
          </div>



        </div>
        <div class="left-two">
          <img src="images/box_left_two.png" alt="">
          <div id="Eleft_two" style="width: 420px;height:320px;"></div>
        </div>
        <div class="left-three">
          <img src="./images/box_left_three.png" alt="">
          <div class="Eleft_three" style="width: 400px; height: 300px;">
            <span class="three-title">月度路网统计事件</span>
            <div class="threeBox">
              <div class="three-one">
                <img src="./images/event_statistics_bg.png" alt="">
                <div class="oneBox">
                  <div class="oneBox-left">
                    <img src="./images/icon_accident.png" alt="">
                  </div>
                  <div class="oneBox-right">
                    <p class="firstTop">{{accidentNumber}}</p>
                    <p class="firstBottom">{{accident}}</p>
                  </div>
                </div>


              </div>
              <div class="three-two">
                <img src="./images/event_statistics_bg.png" alt="">
                <div class="twoBox">
                  <div class="twoBox-left">
                    <img src="images/icon_traffic_jam.png" alt="">
                  </div>
                  <div class="twoBox-right">
                    <p class="secondTop">{{blockingNumber}}</p>
                    <p class="secondBottom">{{blocking}}</p>
                  </div>
                </div>
              </div>
              <div class="three-three">
                <img src="images/event_statistics_bg.png" alt="">
                <div class="threeBox">
                  <div class="threeBox-left">
                    <img src="images/icon_control.png" alt="">
                  </div>
                  <div class="threeBox-right">
                    <p class="thirdTop">{{controlNumber}}</p>
                    <p class="thirdBottom">{{controling}}</p>
                  </div>
                </div>
              </div>
              <div class="three-four">
                <img src="images/event_statistics_bg.png" alt="">
                <div class="fourBox">
                  <div class="fourBox-left">
                    <img src="images/icon_pavement.png" alt="">
                  </div>
                  <div class="fourBox-right">
                    <p class="thirdTop">{{constructionNumber}}</p>
                    <p class="thirdBottom">{{construction}}</p>
                  </div>
                </div>
              </div>
              <div class="three-five">
                <img src="images/event_statistics_bg.png" alt="">
                <div class="fiveBox">
                  <div class="fiveBox-left">
                    <img src="images/icon_weather.png" alt="">
                  </div>
                  <div class="fiveBox-right">
                    <p class="secondTop">{{weatherNumber}}</p>
                    <p class="secondBottom">{{weather}}</p>
                  </div>
                </div>
              </div>
              <div class="three-six">
                <img src="images/event_statistics_bg.png" alt="">
                <div class="sixBox">
                  <div class="sixBox-left">
                    <img src="images/icon_road_construction.png" alt="">
                  </div>
                  <div class="sixBox-right">
                    <p class="firstTop">{{abnormalNumber}}</p>
                    <p class="firstBottom">{{abnormal}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <!-- 弹出框 -->
      <el-dialog title="信息发布" :visible.sync="bigScreenDialogVisible" width="30%" center>

        <el-dialog width="30%" class="abow_dialog" title="模板选择" :visible.sync="templateVisible" append-to-body>
          <el-table :data="ledTemplateManageList">
            <el-table-column label="选择" width="65">
              <template scope="scope">
                <el-radio :label="scope.$index+1" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio>
              </template>
            </el-table-column>
            <el-table-column label="格式" prop="format" :formatter="formatFormat">
            </el-table-column>
            <el-table-column label="展示内容" prop="showContent">
            </el-table-column>
            <el-table-column label="时长" prop="stopTime">
              <template slot-scope="scope">
                {{scope.row.stopTime==0?"静":scope.row.stopTime}}
              </template>
            </el-table-column>


          </el-table>
        </el-dialog>
        <el-button @click="getTemplate()" type="info">选择模板</el-button>
        <el-form :label-position="labelPosition" label-width="80px" :model="templateDetail" style="margin-top: 20px;">
          <el-form-item label="格式">
            <el-select v-model="templateDetail.format" placeholder="请选择格式" style="width:100%">
              <el-option v-for="item in dictsList" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
					v-if="templateDetail.format==1"
					label="停留时间"
					prop="stopTime"
				>
					<el-input
						type="number"
						v-model="templateDetail.stopTime"
						placeholder="请输入停留时间"
					/>
				</el-form-item>
          <el-form-item :label='index>0?"":"展示内容"' prop="showContent" v-for="(item,index) of formContent.contentItem"
            :key="index">
            <div style="display:flex;justify-content: space-around">

              <el-input v-model="item.value" placeholder="请输入内容"></el-input>
              <el-button v-if="index==0" @click="addContent" type="primary">增加</el-button>
              <el-button @click="deleteContent(item)" type="warning" v-if="index>0">删除</el-button>
            </div>
          </el-form-item>
          <el-form-item
					label="类型"
					prop="infoType"
				>
					<el-select
						v-model="templateDetail.infoType"
						placeholder="请选择类型"
					>
						<el-option
							v-for="dict in controlOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
          <!-- <el-form-item label="类型">
            <el-select v-model="formLabelAlign.type" placeholder="请选择类型" style="width:100%">
              <el-option label="普通" value="普通"></el-option>
              <el-option label="管制" value="管制"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sendInfo()">发送</el-button>
          <el-button type="danger" @click="bigScreenDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <!-- 人员搜索 -->
      <div class="searchAll" v-show="searchStatus" v-bind:class="{serIpt:peoSearchShow}">
        <div class="search-input">
          <el-input class="inputAll" placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree class="filter-tree ele_new_left_good" @node-click='getinfo' accordion :default-expand-all='false'
            :data="allList" :props="defaultProps" :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
        <div class="search-imgTop" v-show='peoSearchShow' @click="searchPeoJtT">
          <img src="./images/bottomJt.png" alt="">
        </div>
        <div class="serch-imgBottom" v-show='!peoSearchShow' @click="searchPeoJtB">
          <img src="./images/topJt.png" alt="">

        </div>


      </div>
      <!-- 事件详情 -->
      <div class="eventEdit" v-show='eventstate'>
        <img class="eventimg" src="./images/gb.png" @click="eventstate = false" alt="">
        <el-form v-if="eventstate" ref="eventForm" :model="eventForm" class="ele_new_left_good"
          style="height: 86%;overflow: auto;">
          <el-form-item>
            <div class="eventdetail">
              <span style="color: #1a75cf; margin-right: 20px;">事件类型:</span>
              <p>{{userputaddtow(eventForm.eType)}}</p>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="eventdetail">
              <span style="color: #1a75cf; margin-right: 20px;">发生时间:</span>
              <p>{{eventForm.eCreateTime}}</p>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="eventdetail">
              <span style="color: #1a75cf; margin-right: 20px;">发生地:</span>
              <p>{{eventForm.address}}</p>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="eventdetail">
              <span style="color: #1a75cf; margin-right: 20px;">道路方向:</span>
              <p>{{eventForm.direction}}</p>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="eventdetail">
              <span style="color: #1a75cf; margin-right: 20px;">事件描述:</span>
              <p>{{eventForm.details}}</p>
            </div>
          </el-form-item>
          <el-form-item label="图片:">
            <template v-for="item in eventForm.spareList">
              <el-image style="width: 148px; height: 148px;margin: 10px 10px;" :src="imgUrl + item"
                :preview-src-list="srcListtow(eventForm.spareList)"></el-image>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <!-- 返回中心点 -->
      <div title="返回原点" class="origin" @click=getOrigin()><img src="../ndzd/Package/images/dw.png" alt="">
      </div>
      <!-- 返回控制中心 -->
      <div class="back animate__animated animate__bounce" @click=getBack()>
        <span class="backText">应急指挥</span>
      </div>
      <!-- 隐藏左侧 -->
      <!-- <div v-show='leftShow==false' class="hideLeft" @click=getHideL()>
        <span class="hideText">隐藏左侧</span>
      </div>
      <div v-show='leftShow==true' class="hideLeft" @click=getHideL()>
        <span class="hideText">显示左侧</span>
      </div> -->
      <!-- 隐藏右侧 -->
      <!-- <div v-show='rightShow==false' class="hideright" @click=getHideR()>
        <span class="hideText">隐藏右侧</span>
      </div>
      <div v-show='rightShow==true' class="hideright" @click=getHideR()>
        <span class="hideText">显示右侧</span>
      </div> -->
      <!-- 车辆路书面板 -->
      <div class="Carlushu" v-show="model.lushuPanel">
        <li id="run">
          <img src="./images/icon_car.png" alt="">
          开始
        </li>
        <li id="pause">
          <img src="./images/icon_car.png" alt="">
          暂停
        </li>
        <li id="stop">
          <img src="./images/icon_car.png" alt="">
          停止
        </li>
        <li id="deleteTrajectory">
          <img src="./images/icon_car.png" alt="">
          轨迹清除
        </li>
      </div>
      <!-- 人员路书面板 -->
      <div class="peolushu" v-show="model.peolushuPanel">
        <li id="peoRun">
          <img src="./images/icon_peo.png" alt="">
          开始
        </li>
        <li id="peoPause">
          <img src="./images/icon_peo.png" alt="">
          暂停
        </li>
        <li id="peoStop">
          <img src="./images/icon_peo.png" alt="">
          停止
        </li>
        <li id="peoDeleteTrajectory">
          <img src="./images/icon_peo.png" alt="">
          轨迹清除
        </li>
      </div>
      <!-- <div class="small-window">
        <img src="images/small_window.png" alt="">
      </div>
      <div class="indicator">
        <img src="images/pin_led1.png" alt="">
        <img src="images/pin_event2.png" alt="">
        <img src="images/pin_material3.png" alt="">
        <img src="images/pin_car4.png" alt="">
        <img src="images/pin_construction5.png" alt="">
        <img src="images/pin_monitor6.png" alt="">
        <img src="images/pin_person7.png" alt="">
        <img src="images/pin_statenumber8.png" alt="">
      </div> -->
      <div class="bigIndicator">
        <div id="led" @click="getLed=!getLed">
          <img src="./images/bigIndicator/icon_led.png" alt="">
        </div>
        <div id="monitor" @click="getMon=!getMon">
          <img src="./images/bigIndicator/icon_monitor.png" alt="">
        </div>
        <div id="event" @click="getEve=!getEve">
          <img src="./images/bigIndicator/icon_event.png" alt="">
        </div>
        <div id="material" @click="getMatter=!getMatter">
          <img src="./images/bigIndicator/icon_material.png" alt="">
        </div>
        <div id='car' @click="getCar=!getCar">
          <img src="./images/bigIndicator/icon_car.png" alt="">
        </div>
        <div id="construction">
          <img src="./images/bigIndicator/icon_construction.png" alt="">
        </div>
        <div id="personnel" @click="getPeo=!getPeo">
          <img src="./images/bigIndicator/icon_person.png" alt="">
        </div>
        <div id="StakeNumber" @click="getMileage=!getMileage">
          <img src="./images/bigIndicator/icon_statenumber.png" alt="">
        </div>

      </div>
      <div class="text">
        <span class="LED">LED</span>
        <span class="monitor">监控</span>
        <span class="event">事件</span>
        <span class="material">物资</span>
        <span class="carText">车辆</span>
        <span class="construction">施工</span>
        <span class="personnelText">人员</span>
        <span class="StakeNumber">桩号</span>
      </div>
    </div>
    <div class="right" v-bind:class="{tableright: rightShow}">
      <div class="main-ImgRight">
        <img src="images/background_right.png" alt="">
      </div>
      <div class="surface-right">
        <div class="rightIconX" v-show='rightShow==false' @click=getHideR()>
          <img src="./images/jtLeft.png" alt="">
        </div>
        <div class="rightIconY" v-show='rightShow==true' @click=getHideR()>
          <img src="./images/jtRight.png" alt="">

        </div>
        <div class="right-one">
          <img src="images/box_right_one.png" alt="">
          <div class="oneBox" style="width: 400px;height:300px;">
            <div class="box-title">
              <span>即时事件</span>
            </div>
            <div class="boxbgd ">
              <img src="images/immediate_events_bg.png" alt="">
              <div class="box ele_new_left_good">
                <div class="boxevent " v-for='(item,i) in EmergencyList'>
                  <div class="box-left">
                    <span>{{item.eTypeName}}</span>
                    <div class="event-add-content" :title="'在' + item.address + '发现' + item.details">在{{item.address +
                      '发现' + item.details}}
                    </div>
                  </div>
                  <div class="box-right">
                    <span style="color: #de2729;" v-if="item.eStatus==0">
                      未处理
                    </span>
                    <span style="color:#fced02" v-else-if="item.eStatus==1">
                      处理中
                    </span>
                    <span v-else>
                      已处理
                    </span>
                    <!-- <span  style="color:{{item.eStatus==0?'#dc282a':'#fced02'}}">{{item.eStatus == 0 ? '未处理' : (item.eStatus == 1 ? '处理中' : '已处理')}}</span> -->
                  </div>
                </div>
              </div>


            </div>
          </div>
        </div>
        <div class="right-two">
          <img src="images/box_right_two.png" alt="">
          <div id="Eright_two" style="width: 420px;height:320px;"></div>
        </div>
        <div class="right-three">
          <img src="images/box_right_three.png" alt="">
          <div class="threeBox" style="width: 400px;height:300px;">
            <div class="box-title">
              <span>重点监控</span>
            </div>
            <div class="box-video">

              <template v-for="item in FocusMonitoring">
                <div class="videoStyle">
                  <iframe
                    :src="'../ndzhgs/src/web3.0/cn/demo.html?ip='+ item.ip + '&username='+item.username+'&password='+ item.password +'&port='+item.port+'&channel='+item.channle"
                    width="187px" height="123px" frameborder=0></iframe>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 地图样式 -->
  <script src="js/map/mapStyle.js"></script>
  <!-- 路书 -->
  <script type="text/javascript" src="js/map/LuShu_min.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        			// 类型字典
				controlOptions: [],
        formContent: {
          contentItem: [
            {
              value: "",
            },
          ],
        },
        // 点击大屏id
        ids: [],
        // 选中模板详情
        templateDetail: {},
        // 数据字段
        dictsList: [],
        // 单选按钮
        radio: "",
        // 模板列表
        ledTemplateManageList: [],
        // 模板弹窗
        templateVisible: false,
        // 弹窗表单label位置
        labelPosition: 'left',
        // 表单信息
        // formLabelAlign: {
        //   format: '',
        //   content: '',
        //   stopTime:null,
        //   // type: ''
        // },
        // 大屏弹窗
        bigScreenDialogVisible: false,
        // 搜索参数
        peoSearchShow: true,
        // 搜索参数
        searchStatus: false,
        // 搜索参数
        filterText: '',
        allList: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        leftShow: false,
        rightShow: false,
        options: [{
          value: '1',
          label: '小型车'
        }, {
          value: '2',
          label: '大型车'
        }, {
          value: '3',
          label: '全部'
        }],
        carType: '',
        polymerizationemphasiscamera: null, // 重点监控方法
        polymerizationemphasiscameraList: [], // 重点监控信息
        polymerizationemphasisCar: null, // 车辆聚合方法
        polymerizationemphasisCarList: [], // 车辆聚合信息
        polymerizationemphasisPeo: null, // 人员聚合方法
        polymerizationemphasisPeoList: [], // 人员聚合信息
        polymerizationemphasisLedList: [],//led聚合信息
        polymerizationemphasisLed: [],//led聚合方法
        polymerizationemphasisMileageList: [],//桩号聚合信息
        polymerizationemphasisMileage: [],// 桩号聚合方法
        polymerizationemphasisMatterList: [], //资源聚合信息
        polymerizationemphasisMatter: [],//资源聚合方法
        FocusMonitoring: [], // 重点监控列表
        lushu: '',               // 路书
        // 各个模块
        model: {
          lushuPanel: false, // 路书面板
          peolushuPanel: false,//人员路书面板
        },
        imgUrl: "http://192.168.1.110:9300",
        // 左3图内容
        accidentNumber: '013',
        accident: '交通事故',
        blockingNumber: "01",
        blocking: "交通堵塞",
        controlNumber: "04",
        controling: "交通管制",
        constructionNumber: "06",
        construction: "道路施工",
        weatherNumber: "02",
        weather: "特殊天气",
        abnormalNumber: "030",
        abnormal: "路面异常",

        // 显示车辆位置
        getCar: false,
        // 显示人员位置
        getPeo: false,
        // 显示监控位置
        getMon: false,
        // 显示led位置
        getLed: false,
        // 监控事件
        getEve: false,
        // 监控桩号
        getMileage: false,
        // 监控物资
        getMatter: false,
        EventList: [], // 事件类型列表
        EmergencyList: [],//事件列表
        Earlywarning: '', // 当前展示的事件信息
        eventstate: false, // 事件详情编辑页面
        eventstatemap: true, // 地图是否加载
        eventForm: {},
        form: {
          lng: '',
          lat: '',
        }, //事件信息
        map: "",   //地图实例
        // 消息提示
        message: '',
        lushu: '',               // 路书
        events: [
          {
            highway: "某高速公路",
            event: "自定义事件",
            time: "04-06 10:59:29"
          },
          {
            highway: "某高速公路",
            event: "自定义事件",
            time: "04-06 10:59:29"
          },
          {
            highway: "某高速公路",
            event: "自定义事件",
            time: "04-06 10:59:29"
          },
        ]
      },
      watch: {
        // 物资
        getMatter(val) {
          if (val) {
            getMatterList()
          } else {
            $('.material').css({ color: '#ffffff' })
            this.clear('matter');
            if (vm.polymerizationemphasisMatter != null) {
              vm.polymerizationemphasisMatter.removeMarkers(vm.polymerizationemphasisMatterList);
            }
          }
        },
        // 桩号
        getMileage(val) {
          if (val) {
            this.Loading = this.$loading({
              spinner: "",//自定义加载图标类名
              text: "正在加载中...",//显示在加载图标下方的加载文案
              background: "rgba(0, 0, 0, 0.3)",//遮罩背景色
            })
            console.log(val);
            getMileageList()
            this.searchStatus = true
          } else {
            $('.StakeNumber').css({ color: '#ffffff' })
            this.clear('Mileage');
            if (vm.polymerizationemphasisMileage != null) {
              vm.polymerizationemphasisMileage.removeMarkers(vm.polymerizationemphasisMileageList);
            }
          }
        },
        // led
        getLed(val) {
          if (val) {
            getLedList()
            this.searchStatus = true
          } else {
            this.searchStatus = false
            $('.LED').css({ color: '#ffffff' })
            this.clear('Led');
            if (vm.polymerizationemphasisLed != null) {
              vm.polymerizationemphasisLed.removeMarkers(vm.polymerizationemphasisLedList);
            }
          }
        },
        // 监控人员搜索
        filterText(val) {
          console.log(val);
          console.log(this.$refs.tree.filter(val));
          this.$refs.tree.filter(val);
        },
        // 监控事件
        getEve(val) {
          if (val) {
            eventListadd();
            $('.event').css({ color: '#fe7272' })
          } else {
            $('.event').css({ color: '#ffffff' })
            this.clear('alarmListmap');

          }
        },
        // 监控摄像头
        getMon(val) {

          if (val) {
            this.getlist('road_camera');
            $('.monitor').css({ color: '#fe7272' })
          } else {
            $('.monitor').css({ color: '#ffffff' })
            this.clear('monitoring');
            if (vm.polymerizationemphasiscamera != null) {
              vm.polymerizationemphasiscamera.removeMarkers(vm.polymerizationemphasiscameraList);
            }
          }
        },
        // 监控车辆
        getCar(val) {

          if (val) {
            this.Loading = this.$loading({
              spinner: "",//自定义加载图标类名
              text: "正在加载中...",//显示在加载图标下方的加载文案
              background: "rgba(0, 0, 0, 0.3)",//遮罩背景色
            })
            getCarList();
          } else {
            this.searchStatus = false
            $('.carText').css({ color: '#ffffff' })
            clear('car');
            if (vm.polymerizationemphasisCar != null) {
              vm.polymerizationemphasisCar.removeMarkers(vm.polymerizationemphasisCarList);
            }
          }
        },
        // 监控人员
        getPeo(val) {
          if (val) {
            getPeoList()
            $('.personnelText').css({ color: '#fe7272' })
            this.searchStatus = true
          } else {
            this.searchStatus = false
            vm.clear('people');
            $('.personnelText').css({ color: '#ffffff' })
            if (vm.polymerizationemphasisPeo != null) {
              vm.polymerizationemphasisPeo.removeMarkers(vm.polymerizationemphasisPeoList);
            }
          }
        }
      },
      created() {
        this.getDictsformat("led_format_type")
        this.getDictscontrol("led_control_type")
      },
      methods: {
        // 删除输入框
        deleteContent(item) {
          console.log(item);
          var index = this.formContent.contentItem.indexOf(item);
          console.log(index);
          if (index !== -1) {
            this.formContent.contentItem.splice(index, 1);
          }
        },
        // 增加输入框
        addContent() {
          this.formContent.contentItem.push({
            value: "",
            // key: Date.now()
          });
        },
        // 发送大屏信息
        sendInfo() {
          let arrShowContent = [];
          vm.formContent.contentItem.forEach(item => {
            arrShowContent.push(item.value);
          })
          vm.templateDetail.showContent = arrShowContent.join("||");
          vm.bigScreenDialogVisible = false;
          $.ajax({
            type: 'post',
            url: httpUrl + '/led/led/publish',
            data: JSON.stringify({
              ids: [vm.ids],
              format: vm.templateDetail.format,
              showContent: vm.templateDetail.showContent,
              stopTime: vm.templateDetail.stopTime,
              infoType:vm.templateDetail.infoType
            }),

            dataType: 'json',
            contentType: "application/json",
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (res) {
              if (res.code == 200) {
                console.log(res);
                vm.$message({
                  message: res.msg,
                  type: 'success'
                });
              } else {
                vm.$message({
                  message: '数据获取失败请联系管理员',
                  type: 'warning'
                });
              }
            },
            error: function (err) {
              vm.$message({
                message: '查询失败请稍后再试,或与管理员联系',
                type: 'error'
              });
            }
          })

        },
        reset() {
          
          vm.formContent = {
            contentItem: [
              {
                value: "",
              },
            ],
          }
          this.templateDetail = {},
            this.radio = ""
        },
        // 格式
        formatFormat(row, column, cellValue, index) {
          // console.log(this.dictsList.length);

          for (let i = 0; i < this.dictsList.length; i++) {
            if (this.dictsList[i].dictValue == cellValue + "") {
              return this.dictsList[i].dictLabel
            }

          }
        },
        // 数据字典回显
        getDictsformat(dictType) {
     
          $.ajax({
            type: 'get',
            url: httpUrl + 'system/dict/data/type/' + dictType,
            dataType: 'json',
            contentType: "application/json",
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (res) {
              if (res.code == 200) {
                console.log(res)
                  vm.dictsList = res.data
              } else {
                vm.$message({
                  message: '数据获取失败请联系管理员',
                  type: 'warning'
                });
              }
            },
            error: function (err) {
              vm.$message({
                message: '查询失败请稍后再试,或与管理员联系',
                type: 'error'
              });
            }
          })
        },
        
        getDictscontrol(dictType) {
     
     $.ajax({
       type: 'get',
       url: httpUrl + 'system/dict/data/type/' + dictType,
       dataType: 'json',
       contentType: "application/json",
       headers: {
         Authorization: localStorage.getItem('token')
       },
       success: function (res) {
         if (res.code == 200) {
           console.log(res);
          
          
             vm.controlOptions=res.data
       
          
           
         } else {
           vm.$message({
             message: '数据获取失败请联系管理员',
             type: 'warning'
           });
         }
       },
       error: function (err) {
         vm.$message({
           message: '查询失败请稍后再试,或与管理员联系',
           type: 'error'
         });
       }
     })
   },
        // 选中模板
        getCurrentRow(e) {
          console.log(e);
          
       
          vm.formContent.contentItem = [];
          e.showContent.split("||").forEach(item => {
            let content = {};
            content.value = item;
            vm.formContent.contentItem.push(content);
          })
          // vm.formContent.contentItem = e.showContent
          vm.templateDetail = e;
          vm.templateDetail.format = e.format + "";
          vm.templateVisible = false;

        },
        // 选择模板
        getTemplate() {
          this.templateVisible = true;
          this.radio = ""
          $.ajax({
            type: 'get',
            url: httpUrl + '/led/ledTemplateManage/list',
            // data: {
            //   pageSize: 99999
            // },
            dataType: 'json',
            contentType: "application/json",
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (res) {
              if (res.code == 200) {
                vm.ledTemplateManageList = res.rows
                console.log(res);
              } else {
                vm.$message({
                  message: '数据获取失败请联系管理员',
                  type: 'warning'
                });
              }
            },
            error: function (err) {
              vm.$message({
                message: '查询失败请稍后再试,或与管理员联系',
                type: 'error'
              });
            }
          })
        },
        srcListtow(data) {
          let url = [];
          for (let [key, val] of Object.entries(data)) {
            url.push(imgUrl + val)
          }
          return url;
        },
        // 清除搜索框
        // resetSearch() {
        //   if (this.getCar == false && this.getPeo == false && this.getLed == false) {
        //     this.searchStatus = false
        //   }
        // },
        getinfo(e) {
          console.log(e);
          if (e.children == null || e.children == []) {
            this.map.centerAndZoom(new BMap.Point(e.lng, e.lat), 15);
            // if(e.lng==null){
            //   return
            // }else{
            //   this.map.centerAndZoom(new BMap.Point(e.lng,e.lat), 15);
            // }
          }


        },
        // 收起人员搜索
        searchPeoJtT() {
          this.peoSearchShow = !this.peoSearchShow
        },
        searchPeoJtB() {
          this.peoSearchShow = !this.peoSearchShow
        },
        // 人员搜索
        filterNode(value, data) {
          if (!value) return true;
          console.log(data);
          console.log(value);
          if (data.devIdno != null) {
            return data.devIdno.indexOf(value) !== -1;
          } else {
            return data.name.indexOf(value) !== -1;
          }

        },
        // 返回原点
        getOrigin() {
          this.map.centerAndZoom(new BMap.Point(111.989235, 32.790482), 11);
        },
        // 返回
        getBack() {
          location.href = '/index';
        },
        // 隐藏左
        getHideL() {
          this.leftShow = !this.leftShow
          console.log(this.leftShow);
          // if (this.leftShow == true) {
          //   this.tableState = true;

          // } else {
          //   this.tableState = false;
          // }

        },
        // 隐藏右
        getHideR() {
          this.rightShow = !this.rightShow
          console.log(this.rightShow);
          // if (this.rightShow == true) {
          //   $(".right").hide()
          // } else {
          //   $(".right").show()
          // }
        },
        // 清除覆盖物函数
        clear(init) {
          console.log(init)
          var allOverlay = vm.map.getOverlays();
          for (var i = 0; i < allOverlay.length; i++) {
            if (allOverlay[i].init == init) {
              vm.map.removeOverlay(allOverlay[i]);
            }
          }
        },
        // 开始时间为空提示
        errork() {
          this.$message({
            message: '请选择开始时间',
            type: 'warning'
          });

        },
        // 查找事件类型
        userputaddtow(id) {
          for (let [key, val] of Object.entries(this.EventList)) {
            if (val.id == id) {
              return val.eventName;
              break;
            }
          }
        },
        // 结束时间为空提示
        errorj() {
          this.$message({
            message: '请选择结束时间',
            type: 'warning'
          });
        },
        // 获取摄像头列表
        getlist(name) {
          // road_camera 监控
          $.ajax({
            type: 'post',
            url: httpUrl + 'basicInfo/manager/category/getFacilitiesData/' + name,
            data: {
              pageSize: 99999
            },
            dataType: 'json',
            contentType: "application/json",
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (data) {
              if (data.code == 200) {
                console.log(data);
                if (name == 'road_camera') {
                  getMonList(data.rows, 'road_camera')
                }
                // else if (name == 'service_area') {
                //   serviceArea(data)
                // } else if (name == 'interchange') {
                //   interchange(data)
                // } else if (name == 'bridge') {
                //   bridge(data)
                // } else if (name == 'tunnel') {
                //   tunnel(data)
                // } else if (name == 'social_resources') {
                //   SocialList(data.rows)
                // }
              } else {
                vm.$message({
                  message: '数据获取失败请联系管理员',
                  type: 'warning'
                });
              }
            },
            error: function (err) {
              vm.$message({
                message: '查询失败请稍后再试,或与管理员联系',
                type: 'error'
              });
            }
          })
        },
      }
    })
    // 监控事件
    vm.getEve = true // 警情
    // 初始化地图
    initialization_map()
    // 事件类型列表
    getEventList();
    // 获取重点监控
    getFocusMonitoring();
    // 左边第一个echarts图
    getTraffic()
    // 左边第二个echarts图
    getAccident()
    // 右边第二个echarts图
    // getCarStation()
    getCarStationJia()
    // 左边第三个
    getMonthly()
    // 初始化搜索框
    // resetSearch()

  </script>
  <script type="text/javascript">




  </script>


</body>

</html>




<!-- 点聚合 -->
<script src="js/MarkerClusterer_min.js"></script>
<script src="js/TextIconOverlay_min.js"></script>
<!-- 百度地图自定义窗口函数 -->
<script src="js/map/InfoBox_min.js"></script>
<script src="js/map/index.js"></script>
<!-- 车辆 -->
<script src="js/map/getCarList.js"></script>
<!-- 人员 -->
<script src="js/map/getPeoList.js"></script>

<!-- 桩号 -->
<script src="js/map/getMileageList.js"></script>
<!-- 物资 -->
<script src="js/map/getMatterList.js"></script>
<!-- 监控 -->
<script src="js/map/getMonList.js"></script>
<!-- led -->
<script src="js/map/getLedList.js"></script>